<template>
  <div style="padding: 0 10px">
    <div class="fw-bold c-5e5e5e">
      {{ Q["xh"] }}、
      <vue-mathjax :formula="Q['nr']"></vue-mathjax>
    </div>
    <div class="mt-14" style="max-width: 800px" v-if="Q['pic'][0]">
      <img class="w100" v-lazy="Q['pic'][0]" />
    </div>
    <ul class="options c-5e5e5e">
      <!--双等 谢谢-->
      <li
        class="cursor-pointer mt-14"
        v-for="(item, index) in Q['options']"
        :key="index"
        :class="{ active: letter_json[index] == Q['yx_da'] }"
        @click="on_options_change(letter_json[index])"
      >
        <button class="letter-button circle">{{ letter_json[index] }}</button>
        {{ item }}
      </li>
    </ul>
    <div class="choose-info mt-20 clearfix">
      <div class="float-left c-888 l-height1" v-if="Q['yx_da'].length">
        选择答案（{{ Q["yx_da"][0] }}）
      </div>
      <div class="float-right fz12 c-a5a5a5">
        <div
          v-if="this.$route.params.st_lx != '5'"
          class="inline-block cursor-pointer"
        >
          <p v-if="Q['collect_zt'] === 1" @click="collect_Q(0)">
            <span class="icon fa fa-star mr-4 c-ff9800 fz14 align-0"></span
            >已收藏
          </p>
          <p v-else @click="collect_Q(1)">
            <span class="icon fa fa-star mr-4 fz14 align-0"></span>收藏
          </p>
        </div>
        <!--<p class="cursor-pointer inline-block Q-fix-wrong ml-22">-->
        <!--<span class=" md  fz14" style="vertical-align: -2.5px;">highlight_off</span>-->
        <!--纠错-->
        <!--</p>-->
      </div>
    </div>
  </div>
</template>

<script>
import listmixins from "../listmixins";

export default {
  mixins: [listmixins],
  props: {
    Q: {
      type: Object,
      required: true,
    },
    request_id: {
      type: String,
    },
    colectId: {
      type: String,
    },
    bXlId: {
      type: String,
    },
    startRun: {
      type: Number,
    },
  },
  data() {
    return {
      letter_json: window.$plus.letter_caps,
    };
  },
  created() {
    // this.settimer()
  },
  beforeDestroy() {},
  methods: {
    // 保存答题记录
    saveAnswers(data) {
      let obj = {
        token: this.$store.state.$user.token,
        shijuan_id: data.sj_id * 1,
        xl_id: this.bXlId * 1,
        xh: data.xh * 1,
        st_id: data.id * 1,
        tx: data.tx * 1,
        da: data.yx_da.join(""),
        dc: data.yx_da.join("") == data.da ? "对" : "错",
        df: data.yx_da.join("") == data.da ? 1 : 0,
        ys: this.startRun,
        tzt: data.tzt * 1,
      };
      this.$api.paper.saveAnswers(obj).then((res) => {
        this.$emit("changeTime", 0);
      });
    },

    on_options_change(A) {
      if (this.Q["disabled"]) return;
      this.Q["yx_da"] = [A];
      sessionStorage.setItem("setQ", JSON.stringify(this.Q));
      if (this.$route.params.st_lx == "5") {
        this.saveAnswers(this.Q);
        // this.$emit('singleClick',this.Q)
      }
    },
    collect_Q(zt) {
      const Q = this.Q;
      this.$api.paper
        .collect_Q({
          token: this.$store.state.$user.token,
          lb_id: this.$route.params.product_id,
          sj_id: this.colectId == "" ? Q.sj_id : this.colectId,
          st_id: Q.id,
          lx: "collect",
          zt,
          request_id: this.request_id,
        })
        .then((rst) => {
          if (rst.data.event === "100") {
            Q["collect_zt"] = zt;
          } else {
            this.$Modal.info({ title: "提示", content: rst.data.msg });
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.options {
  li {
    &.active {
      .letter-button {
        color: #fff;
        background-color: #f64c0f;
        border-color: transparent;
      }
    }
    &:not(.active):hover {
      color: #f64c0f;
      .letter-button {
        color: #f64c0f;
        border-color: #f64c0f;
      }
    }
    .letter-button {
      margin-right: 16px;
      vertical-align: 0;
    }
  }
}

//修复错误
.Q-fix-wrong:hover {
  color: #f64c0f;
}
</style>
